<template>
  <div class='container' v-if="questionsDetails.id">
    <el-dialog
      title="题目预览"
      :visible="previewVisible"
      width="50%"
      :before-close="handleClose"
    >
    <!-- 题目信息 -->
      <el-row style="margin-bottom:20px;">
        <el-col :span="6">
          【题型】：{{ showQuestionType(questionsDetails.questionType) +'题' }}
        </el-col>
        <el-col :span="6">
          【编号】：{{ questionsDetails.id }}
        </el-col>
        <el-col :span="6">
          【难度】：{{ showDifficulty(questionsDetails.difficulty) }}
        </el-col>
        <el-col :span="6">
         【标签】：{{ questionsDetails.tags }}
        </el-col>
      </el-row>
      <el-row style="margin-bottom:20px;">
        <el-col :span="6">
         【学科】：{{ questionsDetails.subjectName }}
        </el-col>
        <el-col :span="6">
          【目录】：{{ questionsDetails.directoryName }}
        </el-col>
        <el-col :span="6">
          【方向】：{{ questionsDetails.direction }}
        </el-col>
      </el-row>
    <!-- 题目信息/ -->
      <hr/>
      <!-- 题干 -->
      <span>【题干】：</span>
      <div class="question" v-html="questionsDetails.question" style="color: blue;" />
      <div class="tips" style="margin:5px 0;">{{ showQuestionType(questionsDetails.questionType) }}题 选项：(以下选中的选项为正确答案)</div>
      <el-checkbox-group v-model="rightOptions">
        <el-checkbox
          style="display:block;padding:8px 0;"
          v-for="item in questionsDetails.options"
          :key="item.id"
          :label="item.title"
        >
        </el-checkbox>
      </el-checkbox-group>
      <!-- 题干/ -->
      <hr />
      <!-- 参考答案 -->
      <span>【参考答案】：</span>
       <el-button type="danger" @click="isShowVideo = true">视频答案预览</el-button>
       <video v-if="isShowVideo" controls muted autoplay style="width: 100%; height: 100%">
          <meta name="referrer" content="never" />
          <source :src="questionsDetails.videoURL" type="video/mp4" />
        </video>
      <!-- 参考答案/ -->
      <hr />
      <!-- 答案解析 -->
      <div style="padding:8px 0;">
        <span>【答案解析】：</span>
        <span style="display: inline-block;" v-html="questionsDetails.answer" />
      </div>
      <!-- 答案解析/ -->
      <hr />
      <!-- 题目备注 -->
      <div style="padding:8px 0;">
        <span>【题目备注】：</span>
        <span style="display: inline-block;" v-html="questionsDetails.remarks" />
      </div>
      <!-- 题目备注/ -->
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
import { showQuestionType, showDifficulty } from '@/filters/questions.js'

export default {
  name: 'questions-previews',
  model: {
    prop: 'previewVisible'
  },
  props: {
    previewVisible: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      questionsDetails: {},
      isShowVideo: false
    }
  },
  created () {

  },
  computed: {
    rightOptions () {
      return this.questionsDetails.options.filter(item => item.isRight).map(item => item.title)
    }
  },
  methods: {
    showQuestionType,
    showDifficulty,
    // 关闭弹窗
    handleClose () {
      this.$emit('input', false)
      this.isShowVideo = false
    },

    // 加载基础题库详情
    async loadQuestionsDetails (id) {
      const { data } = await detail(id)
      this.questionsDetails = data
    }

  }

}
</script>

<style scoped lang='less'></style>
